<template>
  <div class="panel-container">
    <div class="panel-content">
      <div class="panel-title">
        <div class="tab-list">
          <div class="tab" :class="{ active: tabActiveTitle === 1 }" @click="handleClick(1)">推送汇总</div>
          <div class="tab" :class="{ active: tabActiveTitle === 2 }" @click="handleClick(2)">推送图表</div>
          <div class="tab" :class="{ active: tabActiveTitle === 3 }" @click="handleClick(3)">推送明细</div>
        </div>
      </div>
      <div class="panel-line flex-end">
        <el-radio-group v-model="tabActive" @change="handleChange" style="margin-right: 30px" size="mini">
          <el-radio-button v-for="item in tabList" :key="item.id" :label="item.id">{{ item.label }}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="tab-content" v-if="tabActiveTitle === 1"><Panel1Table1 :dataList="dataList"></Panel1Table1></div>
      <div class="tab-content" v-if="tabActiveTitle === 2"><MixChart :chartData="chartData" :xAxis="xAxis" /></div>
      <div class="tab-content" v-if="tabActiveTitle === 3"><Panel1Table2 :time="time"></Panel1Table2></div>
    </div>
  </div>
</template>

<script>
import MixChart from '@/components/ECharts/MixChart.vue'
import Panel1Table1 from './Panel1Table1.vue'
import Panel1Table2 from './Panel1Table2.vue'
import { apiBusinessPushChart, apiBusinessPushDetail } from '@/api/dataStatistics'

export default {
  name: 'Panel1',
  props: {
    title: String,
    time: Object,
  },
  components: { MixChart, Panel1Table1, Panel1Table2 },
  watch: {
    time: function () {
      this.getData()
    },
  },
  data() {
    return {
      tabActiveTitle: 1,
      tabActive: 1,
      tabList: [
        { id: 1, label: '日' },
        { id: 2, label: '周' },
        { id: 3, label: '月' },
      ],
      legend: [
        { name: '独享总数', value: 'dx', type: 'bar' },
        { name: '推送总人数', value: 'pub_count', type: 'bar' },
        { name: '查看率', value: 'view_rate', type: 'line' },
        { name: '采纳率', value: 'accept_rate', type: 'line' },
        { name: '减少推荐率', value: 'dec_rate', type: 'line' },
      ],
      xAxis: [],
      chartData: [],
      dataList: [],
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    getData() {
      if (this.tabActiveTitle === 1 || this.tabActiveTitle === 2) {
        apiBusinessPushChart({ ...this.time, method: this.tabActive }).then((res) => {
          const { info } = res
          this.setTableData(info)
          this.setChartsData(info)
        })
      }
    },
    handleChange() {
      this.getData()
    },
    setTableData(data) {
      // 周期 独享总数 推送总人数 查看总人数 获取联系方式人数 减少推荐人数 查看率 采纳率 减少推荐率
      let colList = ['x', 'dx', 'pub_count', 'view_count', 'view_phone_count', 'dec_send_count', 'view_rate', 'accept_rate', 'dec_rate']
      let col = {}
      this.dataList = []
      data.x.forEach((item, index) => {
        col = {}
        for (let key in data) {
          if (key !== 'total') {
            col[key] = data[key][index]
          }
        }
        this.dataList.push(col)
      })
      col = {}
      colList.forEach((item, index) => {
        col[item] = data.total[index]
      })
      this.dataList.push(col)
    },
    setChartsData(data) {
      this.xAxis = data.x
      this.chartData = []
      this.legend.forEach((item) => {
        this.chartData.push({
          name: item.name,
          data: data[item.value],
          type: item.type,
        })
      })
    },
    handleClick(value) {
      this.tabActiveTitle = value
      this.getData()
    },
  },
}
</script>

<style scoped lang="scss">
.panel-line {
  align-items: flex-start;
}

.panel-content {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.tab-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .tab {
    margin-right: 10px;
    cursor: pointer;
    &.active {
      color: #5db42c;
      border-bottom: 2px solid #5db42c;
      cursor: default;
    }
  }
}
</style>
